<template>
  <topAndbottom>
    <template #title>任务统计</template>
    <template #container>
      <div class="common-container">
        <div class="container-search">
          <el-form :model="store.dataSource.search" label-width="80px" @submit.native.prevent="" :inline="true"
            size="default">
            <el-form-item label="项目名称">
              <el-input v-model="store.dataSource.search.name" clearable placeholder="请输入项目名称..." />
            </el-form-item>
            <el-form-item>
              <el-button :icon="Search" type="primary" @click="">搜索</el-button>
              <el-button :icon="Close" type="danger" @click="">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="store.dataSource.search.type">
                <el-radio label="timeAndPeople" border>项目时间人力统计</el-radio>
                <el-radio label="countDown" border>项目倒计时统计</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="container-table">
          <div class="table-data">
            {{ store.dataSource.list }}
            <el-table height="200" :data="Object.keys(store.dataSource.list)" @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column show-overflow-tooltip label="任务名称" min-width="200" align="center">
                <template #default="scope">
                  {{
                    scope.row
                  }}
                </template>
              </el-table-column>

              <el-table-column label="操作" min-width="320" align="center">
                <template #default="scope">
                  <el-button type="danger" :icon="Close">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 是一个动态的 可以切换的页面 -->
          <div class="table-chart" v-if="store.dataSource.search.type === 'timeAndPeople'">项目时间人力统计</div>
          <div class="table-chart" v-else-if="store.dataSource.search.type === 'countDown'">项目倒计时统计</div>

        </div>
        <!-- 如何修改数据 -->
        <div class="container-footer">
          footer
        </div>

      </div>
    </template>
  </topAndbottom>
</template>

<script setup lang='ts'>
import { Search, Close } from '@element-plus/icons'
import analyseIndex from './model/index'
import { analyseSourceStore } from '@/store/analyseSource';
const { tableRowClassName,handleSelectionChange} = analyseIndex()
const store = analyseSourceStore()
</script>
<style scoped lang='scss'>
.container-table {
  background-color: red;
  display: flex;
  flex-direction: column;

  .table-data {
    flex: 1;
  }

  .table-chart {
    flex: 10; 
  }
}
</style>